<template>
  <div>
    <h1>我是第一个子组件</h1>
    <h1>{{ zicount }}</h1>
    <h1>{{ zicolor }}</h1>
    <el-button @click="send">传数据给父组件</el-button>
    <h1>{{ broData }}</h1>
    <h1>辅助函数：state:{{ count }}</h1>
    <h1>辅助函数:getters:{{ douCount }}</h1>
    <button @click="changeCount(8)">辅助函数的mutations</button>
    <button @click="countAct(6)">辅助函数的Actions</button>
  </div>
</template>
<script>
// vuex 提供了4个辅助函数 方便将数据和方法 注入到本组件使用
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
  // props 配置接受父组件的数据 父传子的
  // props: ['zicount', 'zicolor', 'list'],
  props: {
    zicount: {
      type: Number,
      default: 8 // 默认值
    },
    zicolor: {
      type: String,
      required: true // 必传项
    },
    list: {
      type: Array,
      default: () => []
    }

  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['douCount']),
    mynameList() {
      return this.myname + '你好'
    }
  },
  data() {
    return {
      myname: '赵五',
      myage: 18,
      broData: ''
    }
  },
  created() {
    //   this.$bus.$on 监听兄弟组件传来的数据
    // 监听要被先运行到
    this.$bus.$on('sendTwo', (val) => {
      // val ---就是兄弟组件传来的值
      this.broData = val
    })
  },
  mounted() {
    // js 中使用父传子的数据 this.zicount
    console.log(this.zicount)
    // vue单选数据流 不要在子组件中修改父组件传来的数据 会发生混乱
    // this.$parent 可以获取父组件  this.$parent.color 操作父组件的数据和方法
    console.log(this.$parent, '--------------')
    // this.$children 可以获取子组件集合
    console.log(this.$children, '--------------')
    // 想获取具体的子组件的时候  ref标注
  },
  methods: {
    ...mapActions(['countAct']),
    ...mapMutations(['changeCount']),
    send() {
      // 用 this.$emit 触发父组件的自定义事件 并传数据
      this.$emit('getName', this.myname, this.myage)
    }
  }
}
</script>
<style lang="scss">

</style>
